<template>
  <div class="container">
    <div class="view-main">
      <el-card>
        <!-- 筛选组件 -->
        <SiftQuestion @search='search' @clear='clear'/>
        <el-alert :title="`数据一共${page.total}条`" show-icon :closable="false"></el-alert>
        <el-table :data="list" style="margin-top:10px">
          <el-table-column label="试题编号" align="center" prop="number"></el-table-column>
          <el-table-column label="学科" align="center" prop="subject"></el-table-column>
          <el-table-column label="目录" align="center" prop="catalog"></el-table-column>
          <el-table-column label="题型" align="center">
            <template #default='{row}'>{{row.questionType | formatQuestionType}}</template>
          </el-table-column>
          <el-table-column label="题干" align="center" width="200px">
            <template #default='{row}'><div v-html="row.question"></div></template>
          </el-table-column>
          <el-table-column label="录入时间" align="center" width="200px">
            <template #default='{row}'>{{row.addDate | parseTime}}</template>
          </el-table-column>
          <el-table-column label="难度" align="center">
            <template #default='{row}'>{{row.difficulty | formatDifficulty}}</template>
          </el-table-column>
          <el-table-column label="录入人" prop="creator" align="center"></el-table-column>
          <el-table-column label="操作" align="center" width="200px">
            <template #default='{row}'>
              <el-button size="small" circle plain icon="el-icon-view" type="primary" @click="onPrevire(row.id)"></el-button>
              <el-button size="small" circle plain icon="el-icon-edit" type="success"
                  @click="$router.push(`/questions/new?id=${row.id}`)"
              ></el-button>
              <el-button size="small" circle plain icon="el-icon-delete" type="danger" @click="deleteQuestion(row.id)"></el-button>
              <el-button size="small" circle plain icon="el-icon-check" type="warning" @click="addChoice(row.id)"></el-button>
            </template>
          </el-table-column>
        </el-table>
         <el-row type="flex" justify="end">
           <el-pagination
            background
            layout="prev, pager, next,sizes,jumper"
            :total="page.total"
            :current-page="page.page"
            :page-size="page.pagesize"
            :page-sizes="[5,10,15,20]"
            @current-change="pageChange"
            style="margin-top: 10px"
            @size-change="sizeChange"
          />
         </el-row>
      </el-card>
    </div>
    <!-- 预览弹出层 -->
    <QuestionsPreview :showDialog.sync="showPreview" :questionId='questionId' ref="QuestionsPreview"/>
  </div>
</template>

<script>
import SiftQuestion from '../components/sift-question.vue'
import { list, remove, choiceAdd } from '../../api/hmmm/questions'
import { questionType, difficulty } from '@/api/hmmm/constants'
import QuestionsPreview from '../components/questions-preview.vue'
export default {
  components: { SiftQuestion, QuestionsPreview },
  data () {
    return {
      page: {
        page: 1,
        pagesize: 5,
        total: 0
      },
      list: [], // 表格数据
      showPreview: false, // 预览弹出层显示与隐藏
      questionId: 0 // 当前预览题目id
    }
  },
  filters: {
    formatQuestionType (value) {
      const obj = questionType.find((item) => item.value === parseInt(value))
      if (obj && obj.label) return obj.label
      return '未知'
    },
    formatDifficulty (value) {
      const obj = difficulty.find((item) => item.value === parseInt(value))
      if (obj && obj.label) return obj.label
      return '未知'
    }
  },
  created () {
    this.getList(this.page)
  },
  methods: {
    async getList (data) {
      const { data: res } = await list(data)
      this.page.total = res.counts
      this.list = res.items
    },
    pageChange (newPage) {
      this.page.page = newPage
      this.getList(this.page)
    },
    sizeChange (newSize) {
      this.page.pagesize = newSize
      this.getList(this.page)
    },
    search (data) {
      this.page.page = 1
      const searchData = {}
      for (var k in data) {
        if (data[k] !== '') {
          searchData[k] = data[k]
        }
      }
      this.getList({ ...searchData, ...this.page })
    },
    clear () {
      this.getList(this.page)
    },
    // 预览
    onPrevire (id) {
      this.questionId = id
      this.$refs.QuestionsPreview.getQuestionDetail(id)
      this.showPreview = true
    },
    // 删除
    async deleteQuestion (id) {
      try {
        await this.$confirm('此操作将永久删除该题目,是否继续', {
          type: 'warning'
        })
        await remove({ id })
        this.getList()
        this.$message.success('删除成功')
      } catch (err) {
        console.log(err)
      }
    },
    async addChoice (id) {
      try {
        await this.$confirm('此操作将该题目加入精选,是否继续', {
          type: 'info'
        })
        await choiceAdd({ id, choiceState: 1 })
        this.getList()
        this.$message.success('添加成功')
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>

<style scoped lang='less'>
.view-main {
  padding: 5px 10px 0 10px;
  margin-bottom: 10px;
  ::v-deep .el-table th.is-leaf {
    background-color: #fafafa !important;
    border-bottom: 2px solid #e8e8e8;
  }
}
</style>
